<template>
	<view class="grou-title" :style="props.grouOptions?.style" :class="props.grouOptions?.class">
		<slot name='icon'>
			<text :style="props.iconOptions?.style" :class="props.iconOptions?.class" class="icon">
				{{ props.icon }}
			</text>
		</slot>
		<slot>

		</slot>
	</view>
</template>
<script setup>
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance,
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()
	const props = defineProps({
		grouOptions: {
			type: Object,
			default: () => {
				return {
					style: {},
					class: []
				}
			},
		},
		icon: {
			type: String,
			default: '┃',
		},
		iconOptions: {
			type: Object,
			default: () => {
				return {
					style: {},
					class: []
				}
			},
		}
	})
</script>
<style scoped>
	.grou-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;

	}

	.icon {
		color: var(--maiColor);
		padding-right: 0.3em;
	}
</style>